import { aq, op } from '@uwdata/arquero'
species_filt = aq.table(serengeti)
  .filter(aq.escape(r => op.includes(species.category, r.Species)))
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
plotData = {
    let data = [];
    const div = DOM.element('div');
    let layout = {
      title: "Species differences in Continuous Variables",
      yaxis: { title: contVar.name }
    };
    for (var i = 0; i < species.category.length; i++) {
      data.push({
        y: species_filt.filter(aq.escape(r => r.Species === species.category[i])).reify().data()[contVar.variable].data,
        type: "box",
        name: species.category[i]
      })
      yield {html: html`<progress max="${species.category.length}" value="${i}"></progress>`}
    }
    yield {div: div, data: data, layout: layout};
}
categories = Object.values(speciesCats)
viewof species = Inputs.radio(
  categories,
  {
    value: categories[0],
    label: "Select species:",
    format: x => x.name
  }
)

variables = Object.values(contVars)
viewof contVar = Inputs.radio(
  variables,
  {
    value: variables[0], 
    label: "Select a Continuous Variable:",
    format: x => x.name
  }
)
{
  if ('html' in plotData) {
    plotData.div = plotData.html;
  } else {
    Plotly.newPlot(plotData.div, plotData.data, plotData.layout);
  }
  return(plotData.div);
}